import React from 'react';
import {Component} from 'react';
import Table from 'uxcore-table';
import './FgxmDialog.less';

export default class FgxmDialog extends Component {

  constructor(props) {
    super(props);
  }

  handlePagerChange(current, pageSize) {
    const { onPageChange } = this.props;
    if (onPageChange) {
      onPageChange(current, pageSize);
    }
  }

  handleShztClick(shzt) {
    const { onShztChange } = this.props;
    if (onShztChange) {
      onShztChange(shzt);
    }
  }

  render() {
    const {
      shzt,
      data: {
        // 在建工程
        zjgcCount,
        // 办理完毕
        blwbCount,
        // 复工率
        fgl,
        // 施工单位
        sgdw,
        // 监理单位
        jldw,
        // 建设单位
        jsdw,
        // 主管部门
        zgbm,
        //
        jsxdata,
        //
        pageSize,
      }
    } = this.props;
    return (
      <div className="fgxm-dialog-content">
        <div className="fgxm-dialog-top-data">
          <div className="fgxm-dialog-containerBg">
            <div className="fgxm-dialog-container fgxm-dialog-zjgc-container" onClick={() => this.handleShztClick()}>
              <div className="fgxm-dialog-cardLeft">
                在建项目
              </div>
              <div className="fgxm-dialog-cardRight">
                {zjgcCount}
              </div>
            </div>
            <div className="fgxm-dialog-container fgxm-dialog-blwb-container" onClick={() => this.handleShztClick('办理完毕')}>
              <div className="fgxm-dialog-cardLeft">
                办理完毕
              </div>
              <div className="fgxm-dialog-cardRight">
                {blwbCount}
              </div>
            </div>
            <div className="fgxm-dialog-container fgxm-dialog-fgl-container">
              <div className="fgxm-dialog-cardLeft">
                复工率
              </div>
              <div className="fgxm-dialog-cardRight">
                <div>
                  {fgl}
                  <span className="fgxm-dialog-percent">%</span>
                </div>
              </div>
            </div>
          </div>
          <div className="fgxm-dialog-containerBg">
            <div className="fgxm-dialog-containerBottom">
              <div className="fgxm-dialog-cardLeft-bottom">
                施工单位
              </div>
              <div className="fgxm-dialog-cardBottomRight">
                <div><span className="fgxm-dialog-bottomNumber"/></div>
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('填报中')}>
                  填报中<span className="fgxm-dialog-bottomNumber">{sgdw.tbz}</span>
                </div>
              </div>
            </div>
            <div className="fgxm-dialog-containerBottom">
              <div className="fgxm-dialog-cardLeft-bottom ">
                监理单位
              </div>
              <div className="fgxm-dialog-cardBottomRight">
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('监理退回')}>
                  退回<span className="fgxm-dialog-bottomNumber">{jldw.th}</span>
                </div>
                <hr/>
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('待监理确认')}>
                  待确认<span className="fgxm-dialog-bottomNumber">{jldw.dqr}</span>
                </div>
              </div>
            </div>
            <div className="fgxm-dialog-containerBottom">
              <div className="fgxm-dialog-cardLeft-bottom">
                建设单位
              </div>
              <div className="fgxm-dialog-cardBottomRight">
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('建设单位退回')}>
                  退回<span className="fgxm-dialog-bottomNumber">{jsdw.th}</span>
                </div>
                <hr/>
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('待建设单位确认')}>
                  待确认<span className="fgxm-dialog-bottomNumber">{jsdw.dqr}</span>
                </div>
              </div>
            </div>
            <div className="fgxm-dialog-containerBottom">
              <div className="fgxm-dialog-cardLeft-bottom">
                主管部门
              </div>
              <div className="fgxm-dialog-cardBottomRight">
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('主管部门退回')}>
                  退回<span className="fgxm-dialog-bottomNumber">{zgbm.th}</span>
                </div>
                <hr/>
                <div className="fgxm-dialog-pointer" onClick={() => this.handleShztClick('待主管部门确认')}>
                  待审核<span className="fgxm-dialog-bottomNumber">{zgbm.dqr}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="fgxm-dialog-table">
          <div style={{height: '50px', lineHeight: '50px', fontSize: 18}}>
            {!shzt ? '全部' : shzt}项目列表
          </div>
          <Table
            height={350}
            showPager
            showHeaderBorder
            pageSize={pageSize}
            showPagerTotal
            showColumnPicker={false}
            className='kuma-uxtable-split-line'
            jsxcolumns={[
              {
                dataKey: 'coding', title: '复工编号', width: 120,
                render: (coding, item) => (item.shzt !== '办理完毕' ? '-' : coding)
              },
              {
                dataKey: 'shsj', title: '处理时间', width: 200,
                render: (shsj, item) => (!shsj ? '-' : shsj)
              },
              {
                dataKey: 'shzt', title: '办理状态', width: 150
              },
              {
                dataKey: 'engname', title: '项目名称', width: 500
              },
              {
                dataKey: 'sgxkzbh', title: '施工许可证', width: 300,
              },
              {
                dataKey: 'engJsdw', title: '建设单位', width: 300,
              },
              {
                dataKey: 'engJldw', title: '监理单位', width: 300,
              },
              {
                dataKey: 'engSgdw', title: '施工单位', width: 300,
              },
              {
                dataKey: 'startDate', title: '开工日期', width: 200,
              },
            ]}
            jsxdata={jsxdata}
            onPagerChange={(current, pageSize) => {this.handlePagerChange(current, pageSize)}}
          />
        </div>
      </div>
    );
  }
}
